<template>
    <div class="editForm-wrapper">
        <el-dialog
            title="派车单设置"
            :close-on-click-modal="false"
            v-dialogDrag
            :visible.sync="visible"
        >
            <el-form
                class="form-container"
                :model="inputForm"
                ref="inputForm"
                v-loading="loading"
                label-width="83px"
            >
                <el-form-item label="属性名称:" prop="names">
                    <el-input
                        v-model="inputForm.names"
                        placeholder=""
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item label="属性说明:" prop="describes">
                    <el-input
                        v-model="inputForm.describes"
                        placeholder=""
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="属性值:"
                    prop="svalue"
                    :rules="[
              { required: true, message: '属性值不能为空', trigger: 'blur' }
            ]"
                >
                    <el-input
                        v-model="inputForm.svalue"
                        placeholder="请填写属性值"
                        v-if="
                inputForm.componentType === 4 || inputForm.componentType === 5
              "
                    ></el-input>
                    <el-select clearable
                        v-model="inputForm.svalue"
                        v-else
                        placeholder="请填写属性值"
                    >
                        <el-option
                            v-for="item in $dictUtils.getDictList(inputForm.dictCode)"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <div class="footer-input">
            <el-button type="primary" @click="doSubmit()" v-noMoreClick
            >确定</el-button
            >
            <el-button @click="visible = false">取消</el-button>
          </div>
        </span>
        </el-dialog>
    </div>
</template>
<script>
  import { getVarValue, editVarValue } from '@/api/transport/transport.js'

  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        visible: false,
        inputName: '',
        state: '',
        truckNumber: '',
        axle: '',
        id: '',
        sourceType: '',
        transportId: '',
        transCode: '',
        data: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        },
          inputForm: {
              names: '',
              describes: '',
              svalue: '',
              componentType: ''
          }
      }
    },
    methods: {
    	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
      init (method, row, transportId) {
          if (method === 'edit') {
              this.visible = true
              this.id = ''
              this.inputForm = row
              this.transportId = transportId
              this.getVarValue()
          }
      },
      // 获取列表
        getVarValue () {
         getVarValue({
          transportId: this.transportId,
          varSn: this.inputForm.codes
        }).then((res) => {
          if (res.data.code === '200') {
            if (res.data.result!==undefined) {
                this.id = res.data.result.id
                this.inputForm.svalue = res.data.result.varValue
            }
          }
        })
      },
      close () {
      },
      doSubmit () {
          editVarValue({
              id: this.inputForm.id,
              transportId: this.transportId,
              varSn: this.inputForm.codes,
              varValue: this.inputForm.svalue
          }).then((res) => {
              if (res.data.code === '200') {
                  this.$message({
                      message: '设置成功',
                      type: 'success'
                  })
                  this.visible = false
                  this.$emit('refreshDataList')
              }
          })
      }
    }
  }
</script>
<style scoped lang="scss">
  .driver-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        .driver-search{
          width: 100%;
        }
        .driver-search>.el-input {
          width: 260px;
          height: 32px;

          input {
            width: 260px;
            height: 32px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
          .el-textarea__inner::-webkit-input-placeholder {
             color: #999999;
           }
          .el-input__suffix-inner{
            .el-icon-search{
              line-height: 32px;
            }
          }
        }
      }
    }
  }
  .dialog-container {
    width: 100%;
  }

  .container {
    width: 100%;
    /*height: 500px;*/
    display: flex;
  }

  .left-container {
    margin-right: 20px;
    width: 100px;
    overflow: auto; /*当内容超过，出现滚动条*/
  }

  .dialog-footer {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .footer-input {
      width: 160px;
      margin: 0 auto;
  }

</style>
